<template>
    <div>
        <h1>等级展示</h1>
        <a href="/User">返回</a>
        <br>
        <input type="button" value="前往添加等级" @click="GetAdd">
        <br>
        等级名称:
        <input type="text" v-model="find.dname">
        权益:
        <select v-model="find.Qname">
            <option value="">请选择</option>
            <option v-for="d in finds" :value="d.Qyname">{{d.Qyname}}</option>
        </select>
        <input type="button" value="查询" @click="listshow">
        <input type="button" value="清空" @click="QK">
        <table class="table">
            <thead>
                <tr>
                    <th>等级编号</th>
                    <th>等级名称</th>
                    <th>状态</th>
                    <th>权益</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.Did}}</td>
                    <td>{{d.Dname}}</td>
                    <td>{{d.State?"启用":"禁用"}}</td>
                    <td>{{d.Qyname}}</td>
                    <td>
                        <input type="button" :value="d.State?'禁用':'启用'" @click="UptState(d.Did)">
                        <input type="button" v-if="d.State" value="分配权益" @click="GetUpt(d.Did)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            总条数:{{ fysy.totalnum }}条,总页数:{{ fysy.totalpage }}页,
            当前是第{{ find.pageindex }}页,每页显示{{ find.pagesize }}条
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(find.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(find.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        页容量:
        <select v-model="find.pagesize" @change="listshow">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
            <option value="5">5条/页</option>
        </select>
        前往:
        <input type="number" v-model="find.pageindex">
        <input type="button" value="前往" @click="Shows">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

var touer=useRouter();


//等级model
const data=ref([{
    "Did": 0,
  "Dname": "",
  "State": true,
  "Qyname": ""
}])

//查询添加
const find=ref({
    dname:"",
    Qname:"",
    pageindex:1,
    pagesize:2
})


//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})


//钩子
onMounted(() => {
    Shows();
    QY();
})

//权益
const finds=ref([{
    "Qid": 1,
    "Qyname": "",
    "State": true,
    "Qysm": ""
}])

//获取权益
const QY=()=>{
    axios.get("https://localhost:7185/api/DJ/GetQy").then(res=>{
        finds.value=res.data;
    })
}



//显示
const Shows=()=>{
    axios.get("https://localhost:7185/api/DJ/GetDj",{params:find.value}).then(res=>{
        data.value=res.data.list;
        fysy.value.totalnum=res.data.totalnum;
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/find.value.pagesize);
    })
}

//查询按钮
const listshow=()=>{
    find.value.pageindex=1;
    Shows();
}

//翻页
const FY=(vid:number)=>{
    if(vid>=1 && vid<=fysy.value.totalpage){
        find.value.pageindex=vid;
        Shows();
    }
}


//前往添加
const GetAdd=()=>{
    touer.push({path:'/DjAdd'});
}


//修改状态
const UptState=(vid:number)=>{
    if(confirm("您确定要修改当前状态吗?")){
    axios.get("https://localhost:7185/api/DJ/DjStateUpt",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("修改状态成功");
           Shows();
        }else{
            alert("修改状态失败");
            return;
        }
    })
}
}



//权益分配
const GetUpt=(vid:number)=>{
    if(confirm("确定要去分配权益吗")){
        touer.push({path:'/djqy',query:{id:vid}});
    }

}


//清空
const QK=()=>{
   find.value.dname="";
   find.value.Qname="";
}



</script>

<style scoped>

</style>